import React, { useState } from 'react'

export default function Index({ publish }) {
  const [content, setContent] = useState('')
  const keyEnter = (e) => {
    // console.log(e.key);
    if (e.key === 'Enter' && content.trim()) {
      publish(content)
      setContent('')

    } else if (e.key === 'Escape') {
      setContent('')
    }
  }
  return (
    <header className='header'>
      <h1>todos</h1>
      <input value={content} onKeyDown={keyEnter} onChange={(e) => setContent(e.target.value)} className='new-todo' placeholder='What needs to be done?' autoFocus />
    </header>
  )
}
